import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Modal
} from 'react-native';

import Dimensions from 'Dimensions';
var { width, height } = Dimensions.get('window');

class PickerModal extends Component {
  constructor(props) {
    super(props);
  
    this.state = {
      save: typeof(this.props.save) === 'undefined' ? true : false,
    };
  }

  render() {
    return (
      <View style={ this.props.hideShadow ? [styles.pickerModalContainer, {opacity: 1, backgroundColor: '#fff'}] : styles.pickerModalContainer }>
        <Modal
          animationType="slide"
          transparent={true}
          visible={this.props.modalVisible}
          onRequestClose={this.props.onPickerModalCancel}>
          <View style={styles.modalContainer}>
            <View style={styles.modalNav}>
              <TouchableOpacity onPress={this.props.onPickerModalCancel}>
                <Text style={[styles.btnText,{width:80,textAlign:"left"}]}>Cancel</Text>
              </TouchableOpacity>
              <Text style={styles.navTitle}>{this.props.navTitle}</Text>
              {this.state.save ? <TouchableOpacity onPress={this.props.onPickerModalSave}>
                <Text style={[styles.btnText,,{width:80,textAlign:"right"}]}>Save</Text>
              </TouchableOpacity> : <Text style={{width: 80}}></Text>}
              
            </View>
            <View>
                {this.props.children}
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({

  pickerModalContainer: {
    flex:1,
    position:'absolute',
    top:0,
    bottom:0,
    left:0,
    right:0,
    opacity:0.6,
    backgroundColor:'#333',
  },

  modalContainer:{
    position:'absolute',
    bottom:0,
    width:width,
    backgroundColor:'#fff',
    overflow:'hidden',
    borderTopLeftRadius: 3,
    borderTopRightRadius: 3,
  },

  modalNav: {
    flexDirection: 'row',
    justifyContent:'space-around',
    height:40,
    width:width,
    borderBottomWidth:1,
    borderBottomColor:'#acacac',
  },

  btnText:{
    lineHeight:30,
    color:'#56ade0',
    fontSize:16,
  },

  navTitle:{
    lineHeight:30,
    color:'#666',
    fontSize:18,
  },

});

export default PickerModal;
